<!--
 * @Descripttion: 官网栏目
 * @Author: xiao li
 * @Date: 2020-07-06 12:17:07
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 18:38:54
-->
<template>
  <div class="lb-website-info">
    <top-nav></top-nav>
    <div class="page-main">
      <div class="page-top-operate">
        <lb-button type="primary" icon="el-icon-plus" @click="jumpEditModule"
          >添加模块</lb-button
        >
      </div>
      <div class="page-search-form">
        <el-form
          @submit.native.prevent
          :model="searchForm"
          ref="searchForm"
          :inline="true"
        >
          <el-form-item label="模块名" prop="keyword">
            <el-input
              v-model="searchForm.keyword"
              placeholder="请输入模块名"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <lb-button
              size="medium"
              type="primary"
              icon="el-icon-search"
              style="margin-right: 5px"
              @click="getTableDataList(1)"
              >{{ $t('action.search') }}</lb-button
            >
            <lb-button
              size="medium"
              icon="el-icon-refresh-left"
              style="margin-right: 5px"
              @click="resetForm('searchForm')"
              >{{ $t('action.reset') }}</lb-button
            >
          </el-form-item>
        </el-form>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
        style="width: 100%"
      >
        <el-table-column prop="id" label="ID"> </el-table-column>
        <el-table-column
          prop="name"
          width="200px"
          show-overflow-tooltip
          label="模块名"
        >
        </el-table-column>
        <el-table-column prop="type" show-overflow-tooltip label="模块类型">
          <template slot-scope="scope">
            <div>{{ typeOptions[scope.row.type - 1].label }}</div>
          </template>
        </el-table-column>
        <el-table-column width="100" label="图标">
          <template slot-scope="scope">
            <lb-image :src="scope.row.cover" />
          </template>
        </el-table-column>
        <el-table-column prop="top" label="排序值"> </el-table-column>
        <el-table-column prop="status" label="是否展示">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="0"
              @change="updateWebsiteInfo(scope.row.id)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间">
          <template slot-scope="scope">
            <div>{{ scope.row.create_time | handleTime(1) }}</div>
            <div>{{ scope.row.create_time | handleTime(2) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="address" width="180px" label="操作">
          <template slot-scope="scope">
            <div class="table-operate">
              <lb-button
                size="mini"
                plain
                type="primary"
                @click="jumpEditModule(scope.row.id)"
                >{{ $t('action.edit') }}</lb-button
              >
              <lb-button
                size="mini"
                plain
                type="danger"
                @click="confirmDialog(scope.row.id)"
                >{{ $t('action.delete') }}</lb-button
              >
              <lb-button
                size="mini"
                plain
                type="success"
                @click="routeJump(scope.row.type, scope.row.id, scope.row.name)"
                >内容管理</lb-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <lb-page
        :page="searchForm.page"
        :pageSize="searchForm.limit"
        :total="total"
        :batch="false"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      >
      </lb-page>
    </div>
    <el-dialog
      :title="dialogForm.dialogTitle"
      :visible.sync="centerDialogVisible"
      width="500px"
      center
    >
      <el-form
        @submit.native.prevent
        class="inner-form"
        label-width="100px"
        :model="dialogForm"
        ref="dialogForm"
      >
        <el-form-item :label="dialogForm.title">
          <el-input
            v-model="dialogForm.value"
            :placeholder="dialogForm.placeholder"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">{{
          $t('action.cancel')
        }}</el-button>
        <el-button type="primary" @click="submitFormInfo">{{
          $t('action.submit')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      typeOptions: [
        {
          value: 1,
          label: '文章列表'
        },
        {
          value: 2,
          label: '图文详情'
        },
        {
          value: 3,
          label: '招聘信息'
        },
        {
          value: 4,
          label: '联系我们'
        },
        {
          value: 5,
          label: '员工展示'
        },
        {
          value: 6,
          label: '拨打电话'
        },
        {
          value: 7,
          label: '视频模块'
        },
        {
          value: 8,
          label: '表单模块'
        },
        {
          value: 9,
          label: '跳转网页'
        },
        {
          value: 10,
          label: '跳转小程序'
        },
        {
          value: 11,
          label: '明星展示'
        }
      ],
      searchForm: {
        keyword: '',
        page: 1,
        limit: 10
      },
      loading: false,
      tableData: [],
      total: 0,
      dialogForm: {
        dialogTitle: '',
        type: '', // web=>网页  mini=> 小程序 phone=> 电话
        title: '',
        value: '',
        modular_id: '',
        id: ''
      },
      centerDialogVisible: false,
      flag: false
    }
  },
  activated () {
    this.getTableDataList()
  },
  methods: {
    resetForm (name) {
      this.$refs[name].resetFields()
      this.getTableDataList(1)
    },
    getTableDataList (type = 0) {
      if (type === 1) this.searchForm.page = 1
      this.loading = true
      let { searchForm } = this
      this.$api.getWebsiteList(searchForm).then(res => {
        console.log(res)
        this.loading = false
        if (res.code === 200) {
          this.tableData = res.data.data
          this.total = res.data.total
        }
      })
    },
    updateWebsiteInfo (id) {
      this.$api.updetaWebsite({ id }).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message.success(this.$t('tips.successOper'))
        }
      })
    },

    /**
     * @method 跳转到编辑模块页面
     */
    jumpEditModule (id) {
      let url = id ? `/website/editModule?id=${id}` : '/website/editModule'
      this.$router.push(url)
    },
    /**
     * @method 删除信息
     */
    confirmDialog (id) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.$api.delWebsiteInfo({ id }).then(res => {
          if (res.code === 200) {
            this.$message.success(this.$t('tips.successDel'))
            this.searchForm.page = this.searchForm.page < Math.ceil((this.total - 1) / this.searchForm.limit) ? this.searchForm.page : Math.ceil((this.total - 1) / this.searchForm.limit)
            this.getTableDataList()
          }
        })
      })
    },
    submitFormInfo () {
      let { type, value, id } = this.dialogForm
      let isPass = false
      let subForm = {}
      if (type === 'phone') {
        let reg = /((^400)-([0-9]{7})$)|(^1[3-9]\d{9}$)|((^0\d{2,3})-(\d{7,8})$)/
        if (!value) {
          this.$message.error('请输入手机号')
        } else if (!reg.test(value)) {
          this.$message.error('请输入正确的手机号')
        } else {
          isPass = true
          subForm.phone = value
        }
      } else if (type === 'web') {
        if (!value) {
          this.$message.error('请输入网址')
        } else {
          isPass = true
          subForm.web = value
        }
      } else {
        if (!value) {
          this.$message.error('请输入小程序appid')
        } else {
          isPass = true
          subForm.appid = value
        }
      }
      if (isPass) {
        let obj = { [type]: value, modular_id: this.dialogForm.modular_id, id }
        if (this.flag) {
          this.$api.editWebsiteContentInfo(obj).then(res => {
            console.log(res)
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        } else {
          this.$api.addWebsiteContentInfo(obj).then(res => {
            if (res.code === 200) {
              this.$message.success(this.$t('tips.successSub'))
            }
          })
        }
        this.centerDialogVisible = false
      }
    },
    routeJump (type, id, title) {
      let name
      let dialogForm
      let keys
      switch (type) {
        case 1:
          name = 'newsList'
          break
        case 2:
          name = 'imgText'
          break
        case 3:
          name = 'recruit'
          break
        case 4:
          name = 'contact'
          break
        case 5:
          name = 'staff'
          break
        case 6:
          dialogForm = {
            dialogTitle: title,
            type: 'phone', // web=>网页  mini=> 小程序 phone=> 电话
            title: '号码',
            placeholder: '请输入电话号码',
            value: '',
            modular_id: id,
            id: ''
          }
          keys = 'phone'
          break
        case 7:
          name = 'video'
          break
        case 8:
          name = 'form'
          break
        case 9:
          dialogForm = {
            dialogTitle: title,
            type: 'web', // web=>网页  mini=> 小程序 phone=> 电话
            title: '网址',
            placeholder: '请输入网址',
            value: '',
            modular_id: id,
            id: ''
          }
          keys = 'web'
          break
        case 10:
          dialogForm = {
            dialogTitle: title,
            type: 'mini', // web=>网页  mini=> 小程序 phone=> 电话
            title: 'appid',
            placeholder: '请输入小程序appid',
            value: '',
            modular_id: id,
            id: ''
          }
          keys = 'mini'
          break
        case 11:
          name = 'offer/classify'
          break
      }
      if (name) {
        let url = `/website/${name}?id=${id}&title=${title}`
        this.$router.push(url)
      } else {
        this.dialogForm = dialogForm
        this.centerDialogVisible = true
        this.getFormInfo(id, keys)
      }
    },
    getFormInfo (id, type) {
      this.$api.getWebsiteContentList({ id }).then(res => {
        this.flag = res.data.data.length !== 0
        if (res.code === 200 && res.data.data.length) {
          this.dialogForm.value = res.data.data[0][type]
          this.dialogForm.id = res.data.data[0].id
        }
      })
    },
    handleSizeChange (val) {
      this.searchForm.limit = val
      this.handleCurrentChange(1)
    },
    handleCurrentChange (val) {
      this.searchForm.page = val
      this.getTableDataList()
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-website-info {
  width: 100%;
  .inner-form {
    .el-input {
      width: 300px;
    }
  }
}
</style>
